<template>
    <div>

      <tiny-grid ref="gridRef" :fetch-data="fetchData" :prefetch="prefetchArgs" :pager="pagerConfig">
        <tiny-grid-column type="index" width="60"></tiny-grid-column>
        <tiny-grid-column field="name" title="名称"></tiny-grid-column>
        <tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
        <tiny-grid-column field="address" title="地址"></tiny-grid-column>
        <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
      </tiny-grid>
    </div>
  </template>
  
  <script setup lang="jsx">
  import { ref } from 'vue'
  import { TinyGrid, TinyGridColumn, TinyPager, TinyButton } from '@opentiny/vue'
  
  const prefetchArgs = ref([{ property: 'name', sort: 'desc' }])
  const props = defineProps({
    fetchData:Function
  })
  const pagerConfig = ref({
    component: TinyPager,
    attrs: {
      currentPage: 1,
      pageSize: 5,
      pageSizes: [5, 10],
      total: 0,
      layout: 'total, sizes, prev, pager, next, jumper'
    }
  })
  const fetchData = ref({
    api: getData
  })

    
  function getData({ page, filterArgs, sortBy }) {
    props.fetchData.api(page);
    let curPage = page.currentPage
    let pageSize = page.pageSize
    let offset = (curPage - 1) * pageSize
  
    return new Promise((resolve) => {
      setTimeout(() => {
        let result = tableData.value.slice(0)
        let total = tableData.value.length
  
        if (filterArgs) {
          result = result.filter((item) => item.area === filterArgs)
          total = result.length
        }
  
        result = result.slice(offset, offset + pageSize)
  
        resolve({ result, page: { total } })
      }, 500)
    })
  }

  const tableData = ref([
    {
      id: '1',
      name: 'GFD科技YX公司',
      area: '华东区',
      address: '福州',
      introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
    },
    {
      id: '2',
      name: 'WWWW科技YX公司',
      area: '华南区',
      address: '深圳福田区',
      introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
    },
    {
      id: '3',
      name: 'RFV有限责任公司',
      area: '华南区',
      address: '中山市',
      introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
    },
    {
      id: '4',
      name: 'TGBYX公司',
      area: '华北区',
      address: '梅州',
      introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
    },
    {
      id: '5',
      name: 'YHN科技YX公司',
      area: '华南区',
      address: '韶关',
      introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
    },
    {
      id: '6',
      name: '康康物业YX公司',
      area: '华北区',
      address: '广州天河区',
      introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
    }
  ])
  const gridRef = ref()

  
  function filterData() {
    fetchData.value.args = { filterArgs: '华南区' }
    gridRef.value.handleFetch()
  }
  </script>
  